<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js" ></script>
		<script type="text/javascript" src="js/ddata.js" ></script>
	</head>
	<style>
		body{
			padding:0px 0 80px 0;
		}
		.tab{
			width: 100%;
		}
		.tab .top{
			background: #fff;
			position: fixed;
			top: 0px;
			left: 0px;
			height: 50px;
			width: 100%;
			line-height: 50px;
			z-index: 9999;
			box-shadow:2px 2px 3px #cfcfcf;
			-moz-box-shadow:2px 2px 3px #cfcfcf;
			-webkit-box-shadow:2px 2px 3px #cfcfcf;
			  
			
		}
		.tab ul{
			width: 90%;
			padding: 10px 0px 10px 26px;
			height: 50px;
			line-height: 50px;
			box-sizing: border-box;
			
		}
		.tab .top li{
			/*border:1px solid #eee;*/
			float: left;
			width: 30%;
			height: 34px;
			line-height: 34px;
			background:linear-gradient(to top,#36BD7B,#47CE69);
			color: #fff;
			font-size: 16px;
			text-align: center;			
		}
		.clickStyle {
		    opacity: .7;
		}
		.tab .top li:nth-of-type(1){
			border: 1px solid #eee;
			border-radius: 5px 0px 0px 5px;
			
		}
		
		.tab .top li:nth-of-type(2){
			border: 1px solid #eee;
			border-left: none;
			border-right: none;
		}
		.tab .top li:nth-of-type(3){
			border: 1px solid #eee;
			border-radius: 0px 5px 5px 0px;
		}
		.bookdata{
			font-size: 14px;
		}
		.temp{
			padding: 20px 0px;
			width: 100%;
			border-bottom: 1px solid #ccc;			
		}
		.temp .bookinfo{
			width: 90%;
			margin: 0 auto;
		}
		.temp .pic{
			width:84px;
			height: 112px;
			margin-right: 10px;
		}
		.temp .pic img{
			width: 100%;
			background-size: contain;
		}
		.temp .text{
			width: 70%;
		}
		.temp p{
			height: 28px;
			line-height: 24px;
			/*border: 1px solid red;*/
			margin-bottom: 5px;
			font-size: 14px;
			overflow: hidden;
			color: #666;
		}
		.temp .title{
			color: #f66d00;
			font-size: 16px;
		}
		.temp span{
			display: inline-block;
		}
		.temp .descs{
			margin-bottom: 10px;
			font-size: 14px;
			color: #666;
			height: 42px;
			text-indent: 0;			
			text-overflow: ellipsis;  
			display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
		}
		.toTop{
			position: fixed;
			right: 3%;
			bottom: 15%;
			z-index: 999;	
			background-size: contain;	
			display: none;
			
		}
		.toTop img{
			width: 46px;
			height:46px;
		}
		.bottomBar{			
			width: 100%;
			height: 60px;
			padding-top: 12px;
			position: fixed;
			left: 0px;
			bottom: 0px;
			background: #fff;
			border-top: 1px solid #ccc;
			box-shadow:2px 2px 3px #cfcfcf;
			-moz-box-shadow:2px 2px 3px #cfcfcf;
			-webkit-box-shadow:2px 2px 3px #cfcfcf;
			box-sizing: border-box;
		}
		.bottomBar ul li{
			float: left;
			width: 25%;
			text-align: center;
			font-size: 12px;
		}
		.bottomBar ul li a{
			color: #666;
		}
		.bottomBar ul li a:hover{
			text-decoration: none;
		}
		.bottomBar li span{
			display: inline-block;
			width: 26px;
			height: 26px;	
					
		}	
		.bottomBar li:nth-of-type(1) span{
			background: url(img/faxian.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(2) span{
			background: url(img/fenshu.png) no-repeat ;	
			background-size: contain;		
		}
		.bottomBar li:nth-of-type(3) span{
			background: url(img/sech.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(4) span{
			background: url(img/wode.png) no-repeat;	
			background-size: contain;		
		}
		.p_color{
			color: #39C764;
		}
		.end{
			width: 100%;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 16px;
			color: #666;
		}
	</style>
	<body>
		<div class="tab">
			<div class="top">
				<ul class="clearfix top">
					<li class="clickStyle">最新</li>
					<li>热门</li>
					<li>好评</li>
				</ul>
			</div>
			<!--轮播-->
			<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal">
			    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-8376px, 0px, 0px);">
				    <div class="swiper-slide" style="margin-right: 30px;"><img src="img/swip1.jpg"/></div>
				    <div class="swiper-slide" style="margin-right: 30px;"><img src="img/swip2.jpg"/></div>
				    <div class="swiper-slide" style="margin-right: 30px;"><img src="img/swip3.jpg"/></div>
			    </div>
			    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
			    	<span class="swiper-pagination-bullet"></span>
			    	<span class="swiper-pagination-bullet"></span>
			    	<span class="swiper-pagination-bullet"></span>  
			    </div>
		    </div>
			<!--切换-->
			<div class="bookdata">
				<div id="d1"></div>
				<div id="d2"></div>
				<div id="d3"></div>
			</div>			
		</div>
		<div class="toTop">
			<img src="img/scroll-to-top-icon-new.png" />
		</div>
		<!--底部导航-->
		<div class="bottomBar">
			<ul class="clearfix">
				<li><a href="#" onclick="location.href = 'index.html';return false;"><span class="clickStyles"></span><p class="p_color">发现</p></a></li>
				<li><a href="#" onclick="location.href = 'class.html';return false;"><span></span><p>分类</p></a></li>
				<li><a href="#" onclick="location.href = 'seach.html';return false;"><span></span><p>搜索</p></a></li>
				<li><a href="#" onclick="location.href = 'My.html';return false;"><span></span><p>我的</p></a></li>
			</ul>
		</div>
		<!--模板 -->
		<div class="temp" id="temp" style="display: none;" onclick="location.href = 'xiangqing.html';return false;">
			<div class="bookinfo clearfix">
				<div class="pic fl"><img src="img/book_def.png" /></div>
				<div class="text fl">
					<p><span class="title">...</span></p>
					<p class="descs">书的简介</p>
					<p class="author"></p>
				</div>
			</div>			
		</div>
		<script>
		    var swiper = new Swiper('.swiper-container', {
		        spaceBetween: 30,
		        centeredSlides: true,
		    	autoplay: {
			        delay: 2500,
			        disableOnInteraction: false,
		        },
			    pagination: {
			        el: '.swiper-pagination',
			        clickable: true,
			    },
			    navigation: {
			        nextEl: '.swiper-button-next',
			        prevEl: '.swiper-button-prev',
			    },
		   });
		   
		   $(function(){
		   		$(".tab>:last-child>*").hide();
		 		$(".tab>:last-child>:first-child").show();
		   		$(".top li").click(function(){		 			
		 			var index=$(this).index();		 			
		 			//console.log(index);
		 			$(".top li").removeClass();
		 			$(".top li:nth-of-type("+(index+1)+") ").addClass("clickStyle");
		 			var $current_tab = $(this).parents(".tab");										
	                $current_tab.find(">:last-child>*").hide();
	                $current_tab.find(">:last-child>:nth-of-type("+(index+1)+")").show(); 	  	                	                
		 		});		 					 			
		   });
		   window.onscroll=function(){
			    if($(window).scrollTop()>200){
			         $('.toTop').show();
			    }else{
			         $('.toTop').hide();
			    }
			} 
			$('.toTop').click(function(){
			    scroll('0px', 300);
			
			});
		function scroll(scrollTo, time) {
		    var scrollFrom = parseInt(document.body.scrollTop),
		        i = 0,
		        runEvery = 5; // run every 5ms
		
		    scrollTo = parseInt(scrollTo);
		    time /= runEvery;
		
		    var interval = setInterval(function () {
		        i++;
		
		        document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
		
		        if (i >= time) {
		            clearInterval(interval);
		        }
		    }, runEvery);
		}
		
		
  		</script>
		
	</body>
	
</html>
